<template>
  <div class="home">
    <h1>欢迎使用Vue3 + Spring Boot项目</h1>
    <el-button type="primary" @click="getData">获取数据</el-button>
    <div v-if="data" class="data-display">
      <h3>后端返回的数据：</h3>
      <pre>{{ data }}</pre>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'

const data = ref(null)

const getData = async () => {
  try {
    const response = await axios.get('/api/hello')
    data.value = response.data
  } catch (error) {
    console.error('获取数据失败:', error)
  }
}
</script>

<style scoped>
.home {
  padding: 20px;
  text-align: center;
}

.data-display {
  margin-top: 20px;
  text-align: left;
  background: #f5f5f5;
  padding: 15px;
  border-radius: 5px;
}
</style>